<template>
  <a-drawer :open="visible" title="门店看板" @close="onClose">
    <template #closeIcon>
      <div class="express-bar"></div>
      <div class="express-btn">
        <CloseCircleOutlined :size="32" @click="onClose" />
      </div>
    </template>
    <a-card size="small" :title="detailList.store_name">
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="地址">{{ detailList.address }}</a-descriptions-item>
        <a-descriptions-item label="账户余额">{{ detailList.account_balance }}</a-descriptions-item>
        <a-descriptions-item label="最近下单时间">{{ detailList.last_order_time }}</a-descriptions-item>
        <a-descriptions-item label="联系人">{{ detailList.contacts }}</a-descriptions-item>
        <a-descriptions-item label="总欠款额">{{ detailList.debt_amount }}</a-descriptions-item>
        <a-descriptions-item label="最近拜访时间">{{ detailList.last_visit_time }}</a-descriptions-item>
        <!-- <a-descriptions-item label="所属线路">{{ detailList.address }}</a-descriptions-item> -->
        <a-descriptions-item label="应收款额">{{ detailList.receivables }}</a-descriptions-item>
        <a-descriptions-item label="所属片区">{{ detailList.region?.name }}</a-descriptions-item>
        <!-- <a-descriptions-item label="经销商">{{ detailList.dealer?.name }}</a-descriptions-item> -->
      </a-descriptions>
    </a-card>
    <a-card class="smart-margin-top10" size="small" :tab-list="tabList" :active-tab-key="activeKey" @tabChange="(key) => (activeKey = key)">
      <template #customTab="{ tab }">
        <span class="ant-card-head-title" :style="compactModeClass">
          {{ tab }}
        </span>
      </template>
      <template v-if="activeKey === 'cash'">
        <BoardCashTable :enterpriseId="options" />
      </template>
      <template v-if="activeKey === 'payment'">
        <BoardPaymentTable :enterpriseId="options" />
      </template>
      <template v-if="activeKey === 'payable'">
        <BoardPayableTable :enterpriseId="options" />
      </template>
      <template v-if="activeKey === 'gift'">
        <BoardGiftTable :enterpriseId="options" />
      </template>
      <template v-if="activeKey === 'deposit'">
        <BoardDepositTable :enterpriseId="options" />
      </template>
      <template v-if="activeKey === 'advance'">
        <BoardAdvanceTable :enterpriseId="options" />
      </template>
    </a-card>
    <template #footer>
      <a-button @click="onClose">取消</a-button>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { storeApi } from '@/api/business/data/store-api'
import BoardCashTable from './board-cash-table.vue'
import BoardPaymentTable from './board-payment-table.vue'
import BoardPayableTable from './board-payable-table.vue'
import BoardGiftTable from './board-gift-table.vue'
import BoardDepositTable from './board-deposit-table.vue'
import BoardAdvanceTable from './board-advance-table.vue'
import { message } from 'ant-design-vue'
import { errorSentry } from '@/lib/error-sentry'
import { inject } from 'vue'
const compactModeClass = inject('compactModeClass')
defineExpose({
  showDrawer
})
const emit = defineEmits(['refresh'])

// --------------------- Drawer 显示与隐藏 ---------------------
// 是否展示
const visible = ref(false)
// 详情
const options = ref({})
const detailList = ref({})
// 详情tab
const activeKey = ref('cash')
const tabList = [
  {
    key: 'cash',
    tab: '现金明细'
  },
  {
    key: 'payment',
    tab: '预付款明细'
  },
  {
    key: 'payable',
    tab: '欠款款明细'
  },
  {
    key: 'gift',
    tab: '0元赠'
  },
  {
    key: 'deposit',
    tab: '押金记录'
  },
  {
    key: 'advance',
    tab: '预收款明细'
  }
]

function showDrawer(item) {
  options.value = item
  detailData(item)
  visible.value = true
}

const detailData = async (val) => {
  detailList.value = {}
  try {
    const res = await storeApi.detail({ id: val.id })
    detailList.value = res.data
    // message.success(res.msg)
  } catch (e) {
    if (e.status == 500) {
      message.error(e.response.data.message)
    } else {
      message.error(e.msg)
    }

    errorSentry.captureError(e)
  }
}

const onClose = () => {
  visible.value = false
}
</script>
